<template>
  <div class="st-table">
    <el-button @click="query" size="mini" style="float: right;margin-bottom: 3px" type="text">刷新</el-button>

    <el-table :data="ntpData['ntp-server']" border style="width: 100%;margin-top: 3px">
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.name" v-show="scope.row.iseditor"/>
          <span v-show="!scope.row.iseditor">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="ip地址">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row['ip-address']" v-show="scope.row.iseditor"/>
          <span v-show="!scope.row.iseditor">{{ scope.row['ip-address'] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="port" label="端口">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.port" v-show="scope.row.iseditor"/>
          <span v-show="!scope.row.iseditor">{{ scope.row.port }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="版本">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row['ntp-version']" v-show="scope.row.iseditor"/>
          <span v-show="!scope.row.iseditor">{{ scope.row['ntp-version'] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row, scope)" class="el-icon-edit"></el-button>
          <el-button type="text" @click="save(scope.row)" class="el-icon-check"></el-button>
          <!--          <el-button type="danger" @click="remove_Row(scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="add_Row">添加一行</el-button>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'ntp',
  data() {
    return {
      nodeName: '',
      ntpData: {
        "ntp-server": [
          {
            name: "ntp1",
            'ip-address': "192.168.1.1",
            port: "831",
            'ntp-version': "v1.2.3",
            iseditor: false,
          }
        ],

      },
      ntp: {
        "ntp-servers": {
          "ntp-server": []
        }
      }
    };
  },
  methods: {
    // 点击表格
    cellclick(row, column, cell, event) {
      // console.log(row, column, cell, event);
      if (column.label === "序号") {
        this.$set(row, "isOK", true);
      }
      if (column.label === '交易名称') {
        this.$set(row, 'isOK2', true)
      }
      this.$nextTick(() => {
        this.$refs.gain.focus();
      });
    },
    // 离开焦点
    blurClick({row, column}) {
      if (column.label === "名称") {
        this.$set(row, "isOK", false);
      }
      console.log(row, column, "----");
      this.top(row[name], row.sort);
    },
    query() {
      axios.get('/topology/node/' + this.nodeName + '/ntps').then(
          response => {
            console.log("请求成功", response.data);
            this.ntpData = response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
    edit(row, index) {
      row.iseditor = true;
    },
    async save(row, index) {
      row.iseditor = false;
      let temp = row;
      this.$delete(temp, "iseditor")


      this.ntp["ntp-servers"]["ntp-server"].push({...temp})

      console.log("处理完成的数据： ", this.ntp);

      // const {data: res} = await this.$http.post("/node/" + this.nodeName + "/ntpservers", this.ntp);
      // console.log(res);
    },
    add_Row() {
      this.ntpData["ntp-server"].push({
        name: "",
        'ip-address': "",
        port: "",
        'ntp-version': "",
        iseditor: '',
      })
    },
    // 删除指定行
    /*    remove_Row(params) {
  this.ntpServer = this.ntpServer.filter((ele) => {
    var flag = false
    // 如果不一致，则保留该行
    for (const key in params) {
      if (ele[key] != params[key]) {
        flag = true
        break
      }
    }
    return flag
  })
  // 如果全部删除后没有可以点击的一行了，需要加一行空行
  if (!this.ntpServer.demoList.length) {
    this.addFund()
  }
},*/
  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      console.log("收到的信息为： ", data)
      this.nodeName = data;
    })
  }
};
</script>
<style lang="less" scoped>
.st-table {
  padding: 10px;
}
</style